<template>
  <div class="pl_box">
    <!-- 头部 -->
    <header>
      <!-- 背景图 -->
      <div class="hd_bg" :style="`backgroundImage: url(${this.playlist.coverImgUrl})`"></div>
      <!-- 专辑信息 -->
      <div class="hd_cont">
        <!-- 专辑图片 -->
        <div class="img_box">
          <album-img :picUrl="this.playlist.coverImgUrl" :play_count="playlist.playCount"></album-img>
          <span class="gd">歌单</span>
        </div>
        <div class="hd_wrap">
          <!-- 专辑名称 -->
          <div class="hd_titl">{{ playlist.name }}</div>
          <!-- 作者信息 -->
          <div class="hd_auth">
            <!-- 作者图片 -->
            <div class="auth_img">
              <van-image
                width="30px"
                height="30px"
                round
                fit="contain"
                :src="this.playlist.creator.avatarUrl"
              />
              <i class="iconfont icon-tequan"></i>
            </div>
            <!-- 作者名字 -->
            <div class="auth_name">{{ playlist.creator.nickname }}</div>
          </div>
        </div>
      </div>
    </header>
    <!-- 中间内容 -->
    <div class="hd_bottom">
      <!-- 标签 -->
      <div class="tag">
        标签:
        <van-tag size="large" v-for="(tag, idx) in playlist.tags" :key="idx" plain round>{{ tag }}</van-tag>
      </div>
      <!-- 简介 -->
      <div class="intro" :class="{ over_hidd: isHidd }">简介: {{ playlist.description }}</div>
      <i
        v-if="is_show"
        @click="togger_hidd"
        class="iconfont icon-jiantou"
        :class="{ rota: isHidd }"
      ></i>
    </div>
    <!-- 歌曲列表 -->
    <div class="song_list" :class="{ btm: song_id }">
      <p class="title">歌曲列表</p>
      <div class="list">
        <song-list
          v-for="(song, idx) in playlist.tracks"
          :key="idx"
          :name="song.name"
          :singer="song.ar"
          :id="song.id"
          :imgUrl="song.al.picUrl"
          :duration="song.dt"
          :id_list="id_list"
          :idx="idx"
        >
          <div class="order">{{ idx + 1 }}</div>
        </song-list>
      </div>
      <!-- 精选评论 -->
      <div v-show="hotComments.length > 0">
        <comment-list title="精选评论" :comments="hotComments"></comment-list>
      </div>
      <!-- 最新评论 -->
      <comment-list title="最新评论" :comments="newComments"></comment-list>
    </div>
    <!-- 播放条 -->
    <play-bar v-if="song_id"></play-bar>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { get_ss_detail, get_comment_album } from "@/api/album.js";
import AlbumImg from "@/components/common/AlbumImg";
import SongList from "@/components/common/SongList";
import PlayBar from "@/components/common/PlayBar";
import CommentList from "@/components/albumdetail/CommentList";

export default {
  name: "AlbumDetail",
  data() {
    return {
      // 专辑信息
      playlist: {
        creator: {},
      },
      // 精选评论
      hotComments: [],
      // 最新评论
      newComments: [],
      // 多行隐藏
      isHidd: true,
    };
  },
  components: {
    AlbumImg,
    SongList,
    PlayBar,
    CommentList,
  },
  computed: {
    // 歌曲id
    ...mapState(["song_id"]),
    // 判断简介是否超过三行
    is_show() {
      if (
        this.playlist.description &&
        this.playlist.description.match(/\n/g) &&
        this.playlist.description.match(/\n/g).length > 3
      ) {
        return true;
      }
      return false;
    },
    // 使用计算属性来筛选出 新歌榜 内所有歌曲的 id 集合
    id_list() {
      return this.playlist.tracks.map((el) => el.id);
    },
  },
  async created() {
    // 歌单详情
    let playlist_detail = await get_ss_detail(this.$route.params.id);
    this.playlist = playlist_detail.data.playlist;
    // 歌单评论
    let comment_album = await get_comment_album(this.playlist.id);
    this.newComments = comment_album.data.comments;
    this.hotComments = comment_album.data.hotComments;
  },
  methods: {
    // 简介缩放
    togger_hidd() {
      this.isHidd = !this.isHidd;
    },
  },
};
</script>

<style lang="scss" scoped>
.pl_box {
  header {
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
    .hd_bg {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-position: center;
      background-size: cover;
      filter: blur(20px);
      transform: scale(1.5);
      z-index: -99;
    }
    .hd_cont {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 15px;
      .img_box {
        position: relative;
        flex-shrink: 0;
        width: 126px;
        height: 126px;
        overflow: hidden;
        box-shadow: 2px 2px 10px 5px rgba(0, 0, 0, 0.5);
        album-img {
          width: 100%;
        }
        .gd {
          position: absolute;
          left: 0;
          top: 20%;
          color: #fff;
          width: 34px;
          height: 17px;
          line-height: 17px;
          font-size: 9px;
          background-color: #b52928;
          padding-left: 8px;
          border-radius: 0 17px 17px 0;
        }
      }
      .hd_wrap {
        flex: 1;
        height: 126px;
        margin-left: 15px;
        color: #fff;
        .hd_titl {
          font-size: 18px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          overflow: hidden;
        }
        .hd_auth {
          display: flex;
          align-items: center;
          margin-top: 20px;
          .auth_img {
            position: relative;
            width: 30px;
            height: 30px;
            i {
              width: 13px;
              height: 13px;
              text-align: center;
              line-height: 14px;
              border-radius: 50px;
              background-color: #ffbd20;
              position: absolute;
              bottom: 0;
              right: -4px;
              color: #fff;
              font-size: 10px;
            }
          }
          .auth_name {
            width: 100px;
            margin-left: 10px;
            color: hsla(0, 0%, 100%, 0.7);
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
        }
      }
    }
  }
  // 中间内容
  .hd_bottom {
    position: relative;
    color: #666;
    margin: 10px 15px 0;
    padding-bottom: 15px;
    white-space: normal;
    .tag {
      .van-tag {
        margin: 0 6px;
      }
    }
    .intro {
      font-size: 14px;
      margin: 15px 0;
      line-height: 22px;
      white-space: pre-line;
    }
    .over_hidd {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
    }
    i {
      position: absolute;
      right: 0;
      bottom: 10px;
      transform: rotate(-90deg);
      &.rota {
        transform: rotate(90deg);
      }
    }
  }
  // 歌曲列表
  .song_list {
    .title {
      font-size: 12px;
      color: #666;
      padding: 0 10px;
      line-height: 2;
      background-color: #eeeff0;
    }
    &.btm {
      margin-bottom: 60px;
    }
    .list {
      .order {
        width: 40px;
        flex-shrink: 0;
        text-align: center;
      }
    }
  }
}
</style>
